<template>
  <div class="w-full h-full">
    <n-layout has-sider class="h-full">
          <n-layout-sider
              bordered
              class="bg-slate-600 h-full"
              collapse-mode="width"
              :collapsed-width="64"
              :width="240"
              :collapsed="collapsed"
              show-trigger
              @collapse="collapsed = true"
              @expand="collapsed = false"
          >
            <div class="w-full h-14 bg-bgColor text-xl items-center flex justify-center" style="color: #fff;">
              <template v-if="!collapsed">
                网站后台
              </template>
              <template v-else>
                  <img src="@/assets/logo.png" class="w-14 h-14"/>
              </template>
            </div>
              <n-menu
                :value="menuValue"
                :collapsed="collapsed"
                :collapsed-width="64"
                :collapsed-icon-size="22"
                :options="menuOptions"
                :render-label="renderMenuLabel"
                :render-icon="renderMenuIcon"
                :expand-icon="expandIcon"
                :on-update:value="toggleMenu"
              />
            </n-layout-sider>
            <n-layout>
              <header class="w-full h-14 bg-bgColor flex justify-between items-center fixed z-10">
                  <!-- 左边 -->
                  <aside class="w-10 pl-2 flex items-center h-full">
                      <n-icon size="24" color="#fff" @click="collapsed = !collapsed">
                        <Grid/>
                      </n-icon>
                      <!-- 面包屑 -->
                      <n-breadcrumb separator=">" class="ml-4">
                        <n-breadcrumb-item v-for="item in breadcrumbList" :key="item">
                          <!-- <n-icon color="#fff"><MdCash /></n-icon>  -->
                          <span style="color: #fff;">
                            {{ item }}
                          </span>
                        </n-breadcrumb-item>
                      </n-breadcrumb>
                  </aside>
                  <!-- 右边 -->
                  <aside :class="['w-[18rem]','flex','justify-center','items-center','h-full','absolute',collapsed?'right-20':'right-[16rem]']">
                    <p class="w-28 flex items-center">
                      <n-icon size="24" color="#fff">
                        <ScanOutline />
                      </n-icon>
                      <span style="color: #fff;" class="pl-2">全屏</span>
                    </p>
                    <n-dropdown :options="options" trigger="click" label-field="label">
                        <main class="w-26 justify-center items-center flex">
                          <n-avatar
                            round
                            size="small"
                            src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                          />
                          <p class="pl-2" style="color: #fff;">超级管理员</p>
                        </main>
                    </n-dropdown>
                  </aside>
              </header>
              <!-- tablist -->
              <div class="pl-4 pr-4 h-14 w-full fixed z-10 mt-14 py-1" style="background-color: #fff;">
                <n-tabs
                  v-model:value="currentPath"
                  type="card"
                  :addable="addableRef"
                  :closable="closableRef"
                  tab-style="min-width: 80px;"
                  @update:value="handleBeforeLeave"
                  @close="handleClose"
                  @add="handleAdd"
                >
                <n-tab-pane :closable="panel.closed" v-for="panel in tabList " :key="panel.id" :name="panel.name" @click="router.push(panel.path)">
                </n-tab-pane>
                <template #prefix >
                  <n-icon @click="preRouter">
                    <ArrowBack/>
                  </n-icon>
                </template>
                <template #suffix>
                  <n-icon @click="nextRouter">
                    <ArrowForward/>
                  </n-icon>
                </template>
              </n-tabs>
              </div>
              <div class="px-3 pt-[6.5rem]">
                <router-view #default="{Component}">
                    <keep-alive>
                        <component :is="Component" v-if="$route.meta.KeepAlive"/>
                    </keep-alive>
                    <component :is="Component" v-if="!$route.meta.KeepAlive"/>
                 </router-view>
              </div>
            </n-layout>
    </n-layout>
    </div>
</template>

<script setup lang="ts">
import { useUserStore } from '../../store/user'
let userStore = useUserStore()
import { storeToRefs } from 'pinia';
let {breadcrumbList}  = storeToRefs(userStore)
import { KeepAlive } from 'vue'
import { ref, h } from 'vue'
import type { MenuOption } from 'naive-ui'
import { ScanOutline,Bookmark,Grid, Settings,Albums } from '@vicons/ionicons5'
import {
  Pencil as EditIcon,
  LogOutOutline as LogoutIcon,
  PersonCircleOutline as UserIcon
} from '@vicons/ionicons5'
import { NIcon  } from 'naive-ui'
import {Home,People,ReaderSharp,SendSharp,PricetagsSharp,RibbonSharp} from '@vicons/ionicons5'
import { RouterLink } from 'vue-router'
let collapsed = ref(false)
function renderIcon(NIcon: Component,color?: string) {
  return () => h(NIcon, {color: color? color: null}, { default: () => h(icon) })
}
const menuOptions: MenuOption[] = [
  {
    label: () => h(RouterLink,{to:'/'},{default: "首页"}),
    icon: renderIcon(Home,'#55bdff'),
    key: '首页',
    href: '/'
  },
  {
    label: () => h(RouterLink,{to:'/swiper'},{default: "轮播图"}),
    icon: renderIcon(SendSharp,'#ffd630'),
    key: '轮播图',
    href: '/swiper'
  },
  {
    label: () => h(RouterLink,{to:'/production'},{default: "产品中心"}),
    icon: renderIcon(Bookmark,'#199028'),
    key: '产品中心',
    href: '/production'
  },
  {
    label: () => h(RouterLink,{to:'/apply'},{default: "应用领域"}),
    icon: renderIcon(PricetagsSharp,'#9b59b6'),
    key: '应用领域',
    href: '/apply'
  },
  {
    label: () => h(RouterLink,{to:'/cooperate'},{default: "合作案例"}),
    icon: renderIcon(RibbonSharp,'#c0392b'),
    key: '合作案例',
    href: '/cooperate'
  },
  {
    label: '新闻管理',
    icon: renderIcon(ReaderSharp,'#2ecc71'),
    key: '新闻管理',
    href: 'https://baike.baidu.com/item/%E4%B8%94%E5%90%AC%E9%A3%8E%E5%90%9F/3199',
    children: [
      {
        label: () => h(RouterLink,{to:'/list'},{default: "新闻列表"}),
        key: "新闻列表"
      },
      {
        label: () => h(RouterLink,{to:'/publish'},{default: "发布新闻"}),
        key: "发布新闻"
      },
      {
        label: () => h(RouterLink,{to:'/tagList'},{default: "标签管理"}),
        key: "标签管理"
      }
    ]
  },
  {
    label: '项目报备',
    icon: renderIcon(Albums,'#686de0'),
    key: 'hear-the-wind-project',
    children: [
      {
        label: () => h(RouterLink,{to:'/projectList'},{default: "项目列表"}),
        key: "项目列表"
      },
      {
        label: () => h(RouterLink,{to:'/projectAdmin'},{default: "项目负责人"}),
        key: '项目负责人'
      }
    ]
  },
  {
    label: '用户管理',
    icon: renderIcon(People,'#f8c291'),
    key: 'hear-the-wind-user',
    href: 'https://baike.baidu.com/item/%E4%B8%94%E5%90%AC%E9%A3%8E%E5%90%9F/3199',
    children: [
      {
        label: () => h(RouterLink,{to:'/add_user'},{default: "加入我们"}),
        key: '加入我们',
        href: 'https://baike.baidu.com/item/%E4%B8%94%E5%90%AC%E9%A3%8E%E5%90%9F/3199'
      },
      {
        label: () => h(RouterLink,{to:'/link_user'},{default: "联系我们"}),
        key: '联系我们',
        href: 'https://baike.baidu.com/item'
      }
    ]
  },
  {
    label: "系统设置",    
    key: '系统设置',
    icon: renderIcon(Settings,'#f0932b'),
    href: 'https://baike.baidu.com/item/%E4%B8%94%E5%90%AC%E9%A3%8E%E5%90%9F/3199',
    children: [
      {
        label: () => h(RouterLink,{to:'/website'},{default: "网站设置"}),
        key: "网站设置"
      },
      {
        label: () => h(RouterLink,{to:'/system'},{default: "后台设置"}),
        key: "系统设置"
      }
    ]
  }
]
// 用户头像编辑
let options = [
        {
          label: '用户资料',
          key: 'profile',
          icon: renderIcon(UserIcon)
        },
        {
          label: '编辑用户资料',
          key: 'editProfile',
          icon: renderIcon(EditIcon)
        },
        {
          label: '退出登录',
          key: 'logout',
          icon: renderIcon(LogoutIcon)
        }
      ]

  /**
   * 标签页的功能
   */
    import {computed} from 'vue'
    import {ArrowBack, ArrowForward} from '@vicons/ionicons5'
    import { watch } from 'vue'
      const valueRef = ref(1)
      const panelsRef = ref([1, 2, 3, 4, 5])
      const addableRef = computed(() => {
        return {
          disabled: panelsRef.value.length >= 10
        }
      })
      const closableRef = computed(() => {
        return panelsRef.value.length > 1
      })
      
      // 监听路由的变化
      import {useRouter} from 'vue-router'
      import { useUserStore } from '../../store/user'
      const store = useUserStore()
      import {storeToRefs} from 'pinia'
      let { tabList, currentPath, menuValue } = storeToRefs(store)
      const router = useRouter()
      // 切换路由
      const handleBeforeLeave = (val:string) => {
        console.log(menuValue.value)
        let path:string = getKey(val)
        router.push(path)
      }

      let pathMap = {
        "/": "首页",
        "/swiper": "轮播图",
        "/add_user": "加入我们",
        "/link_user": "联系我们",
        "/list": "新闻列表",
        "/publish": "发布新闻",
        "/website": "网站设置",
        "/system": "系统设置",
        "/apply": "应用领域",
        "/production": "产品中心",
        "/cooperate": "合作案例",
        "/tagList": "标签管理",
        '/projectList': '项目列表',
        '/projectAdmin': '项目负责人',
        '/projectApproval': '项目审批'
      }

      // 对应的层次结构
      let linkMap = {
        "/": ["首页"],
        "/swiper": ["首页","轮播图"],
        "/add_user": ["首页","用户管理","加入我们"],
        "/link_user": ["首页","用户管理","联系我们"],
        "/list": ["首页","新闻管理","新闻列表"],
        "/publish": ["首页","新闻管理","发布新闻"],
        "/website": ["首页","系统设置","网站设置"],
        "/system": ["首页","系统设置","系统设置"],
        "/apply": ["首页","应用领域"],
        "/production": ["首页","产品中心"],
        "/cooperate": ["首页","合作案例"],
        "/tagList": ["首页","新闻管理","标签管理"],
        '/projectList': ['首页', '项目管理', '项目列表'],
        '/projectAdmin': ['首页', '项目管理', '项目负责人'],
        '/projectApproval': ['首页', '项目管理', '项目审批']
      }
      // 获取路径
      let getKey = (value: string) => {
        let key_val = ''
        for(let key in pathMap) {
          //@ts-ignore
          if (pathMap[key] === value) {
              key_val = key
              break;
          }
        }
        return key_val
      }
      watch(() => router.currentRoute.value.path, (path) => {
        console.log(path)
        //@ts-ignore
        breadcrumbList.value = linkMap[path]
        let bool:boolean = tabList.value.some(item => item.path === path)
        //@ts-ignore
        currentPath.value = pathMap[path]
        menuValue.value = currentPath.value
        if (!bool) {
          tabList.value.push({
              id: tabList.value.length + 1,
              //@ts-ignore
              name: pathMap[path],
              path,
              closed: true
          })
        } 
    },{
      immediate: true
    })
    // 关闭标签
    const handleClose = (target:string) => {
      tabList.value = tabList.value.filter(item => item.name !== target)
      let path = tabList.value[tabList.value.length - 1].path
      router.push(path)
    }
    // 切换菜单
    const toggleMenu = (val:string) => {
       menuValue.value = val
    }

    // 切换上一个路由
    const preRouter = () => {
      let currentRoute = router.currentRoute.value
      //@ts-ignore
      let index = tabList.value.findIndex((item) => item.path == currentRoute.fullPath)
      if (index === 0) return
      router.push(tabList.value[index - 1].path)
    }

    // 切换下一个路由
    const nextRouter = () => {
      let currentRoute = router.currentRoute.value
      //@ts-ignore
      let index = tabList.value.findIndex((item) => item.path == currentRoute.fullPath)
      if (index === tabList.value.length - 1) return
      router.push(tabList.value[index + 1].path)
    }

    // 添加路由标签页
    const handleAdd = () => {
       
    }
</script>

<style lang="less" scoped>
  :deep(.n-breadcrumb-item__separator) {
    color: #fff!important;
  }
</style>
